<template>
  <el-dialog
      v-model="dialogVisible"
      :title="title+'填报'"
      width="50%"
      class="lookDialog"
      :before-close="beforeClose"
      destroy-on-close
  >
    <el-form
        ref="formRef"
        label-width="auto"
        :model="dataStore.inputDataParams"

    >
      <el-form-item label="日期：" prop="dataTime">

        <el-date-picker
            v-model="dataStore.inputDataParams.dataTime"
            type="date"
            placeholder="请选择时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item
          :label="item.fieldName+'：'"
          :prop="item.fieldValue"
          v-for="(item,index) in dataStore.inputDataParams.fieldList"
          :key="index"
      >
        <el-input v-model="dataStore.inputDataParams.fieldList[index].fieldValue" placeholder="请输入数据名称"/>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <button class="btn-baseStyle btn-baseStyle-border" @click="resetForm(formRef)">取消</button>
        <button class="btn-baseStyle btn-Primary ml-2" @click="inputData">提交</button>
      </span>
    </template>

  </el-dialog>
</template>
<script setup lang="ts">
//组件

//接口


//api
import {reactive, ref, nextTick} from 'vue';
import useDataWriteReportStore from "@/store/modules/dataWriteReport/dataWriteReport";
import {ElInput, FormInstance, ElMessage} from 'element-plus'
import {writeReportItemType} from "@/api/datWriteReport/type";

//data
const dialogVisible = ref<boolean>(false)
const dataStore = useDataWriteReportStore()
const formRef = ref<FormInstance>()
const emit = defineEmits(['addSuccess'])
const title = ref('')
/*
函数
*/

/**************************接口函数**************************/


/**************************操作函数**************************/



const init = (item: writeReportItemType) => {
  dialogVisible.value = true
  title.value = item.dataName
  dataStore.inputDataParams.dataId = item.id
  dataStore.inputDataParams.fieldList = item.fieldList.map((item) => {
    return {
      fieldValue: '',
      fieldName: item
    }
  })
  nextTick(() => {
    formRef.value?.resetFields()
  })
}

const useInputData = async () => {
  console.log(dataStore.inputDataParams)
  try {
    let res = await dataStore.useInputDataValue()
    ElMessage({
      type: 'success',
      message: `新建成功`,
    })
    emit('addSuccess')
    dialogVisible.value = false
  }catch (err){
    ElMessage({
      type: 'error',
      message: `新建失败`,
    })
  }
}

const inputData = () => {
  useInputData()
}


const resetForm = (formEl: FormInstance | undefined) => {
  dialogVisible.value = false
}

const beforeClose = () => {
  formRef.value?.resetFields()
  dialogVisible.value = false
}


defineExpose({
  dialogVisible,
  init
})
</script>

<style lang="scss" scoped>
.lookTable {
  :deep(.el-table__header  .el-table__cell) {
    background-color: #F2F2F2;
  }
}
</style>

